<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">

    <!-- un-comment this code to enable service worker
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
          .then(() => console.log('service worker installed'))
          .catch(err => console.log('Error', err));
      }
    </script>-->

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

  <!--<p class="bar">-->
    <!--我是一个拥有44固定高的块状布局-->
  <!--</p>-->
  <div class="bar bar-header bar-positive item-input-inset">
    <a href="#" class="button button-clear icon-right ion-android-arrow-dropdown">北京</a>
    <label class="item-input-wrapper">
      <input type="text" placeholder="请输入城市">
    </label>
  </div>
  <div class="bar bar-subheader bar-assertive">
    <!--<h1 class="title">我是副导航</h1>-->
    <div class="button-bar">
      <a href="#" class="button">新闻</a>
      <a href="#" class="button">国内</a>
      <a href="#" class="button">国外</a>
      <a href="#" class="button">娱乐</a>
      <a href="#" class="button">军事</a>
      <a href="#" class="button">体育</a>
    </div>
  </div>
  <div style="overflow-y: auto" class="scroll-content has-header has-subheader has-footer">
    <p class="light balanced-bg">我是内容</p>
    <p class="stable dark-bg">我是内容</p>
    <p class="positive assertive-bg">我是内容</p>
    <p class="calm energized-bg">我是内容</p>
    <p class="balanced calm-bg">我是内容</p>
    <p class="dark energized-bg">我是内容</p>
    <p class="assertive royal-bg">我是内容</p>
    <p class="royal light-bg">我是内容</p>
    <p class="energized royal-bg">我是内容</p>
    <p class="light-bg">我是内容</p>
    <p class="stable-bg">我是内容</p>
    <p class="positive-bg">我是内容</p>
    <p class="calm-bg">我是内容</p>
    <p class="balanced-bg">我是内容</p>
    <p class="dark-bg">我是内容</p>
    <p class="assertive-bg">我是内容</p>
    <p class="royal-bg">我是内容</p>
    <p class="energized-bg">我是内容</p>
    <p class="energized-border">我是内容</p>
    <!--使用图标-->
    <p style="font-size: 30px" class="icon ion-battery-full royal">我是内容</p>
    <p style="font-size: 30px" class="icon ion-happy-outline assertive">我是内容</p>
    <p style="font-size: 30px" class="icon ion-social-twitter royal">我是内容</p>
    <p class="padding">我是内容</p>
    <p class="padding-bottom">我是内容</p>
    <p class="padding-left">我是内容</p>
    <p class="padding-right">我是内容</p>
    <p class="padding-top">我是内容</p>
    <div class="list  assertive-border ">
      <span class="item assertive-border">
        css
      </span>
      <span class="item assertive-border">
        java
      </span>
      <span class="item dark-border">
        html5
      </span>
      <span class="item royal-border">
        php
      </span>
    </div>
    <div class="list  assertive-border ">
      <span class="item card assertive-border">
        css
      </span>
      <span class="item card assertive-border">
        java
      </span>
      <span class="item card dark-border">
        html5
      </span>
      <span class="item card royal-border">
        php
      </span>
    </div>
    <!--纯文字列表 -->
    <ul class="list">
      <li class="item item-balanced">
        <h1 class="item">
          今天周六，我们还在上课
        </h1>
      </li>
      <li class="item item-divider">
        <h2 class="item">
          那又怎样
        </h2>
      </li>
      <li class="item item-assertive">
        <h3 class="item">
          不想怎么样
        </h3>
      </li>
      <li class="item item-balanced item-borderless">
        <h4 class="item">
          关我屁事
        </h4>
      </li>

    </ul>
    <!--带有图标的列表-->
    <ul class="list">
      <li class="item item-icon-left item-icon-right">
        <i class="icon ion-home"></i>
        <h1>城市</h1>
        <i class="icon ion-ios-arrow-forward"></i>
      </li>
      <li class="item item-icon-left item-icon-right">
        <i class="icon ion-ios-time-outline"></i>
        <h1>入住时间</h1>
        <i class="icon ion-ios-arrow-forward"></i>
      </li>
      <li class="item item-icon-right item-icon-left">
        <i class="icon ion-magnet"></i>
        <h1>关键字</h1>
        <i class="icon ion-ios-arrow-forward"></i>
      </li>
      <li class="item item-icon-right item-icon-left">
        <i class="icon ion-xbox"></i>
        <h1>价格</h1>
        <i class="icon ion-ios-arrow-forward"></i>
      </li>
    </ul>
    <ul class="list card">
      <li class="item item-avatar-left">
        <img src="img/1.jpg" alt="">
        <h2>yuanyuan</h2>
        <p>hello</p>
      </li>
      <li class="item item-avatar-left">
        <img src="img/2.jpg" alt="">
        <h2>yuanyuan</h2>
        <p>nice to meet you</p>
      </li>
      <li class="item item-avatar-left">
        <img src="img/3.jpg" alt="">
        <h2>yuanyuan</h2>
        <p>nice to meet you too</p>
      </li>
      <li class="item item-avatar-left">
        <img src="img/4.jpg" alt="">
        <h2>yuanyuan</h2>
        <p>see you again</p>
      </li>
    </ul>
    <!--带缩略图的-->
    <ul class="list">
      <li class="item item-thumbnail-left">
        <img src="img/6.jpg" alt="">
        <h2>习近平主席拉美之行：站立历史潮头 发时代强音</h2>
        <p>习近平同智利总统会谈</p>
        <p>习主席的圣地亚哥时间</p>
        <p>对江西电厂坍塌事故作指示</p>
      </li>
    </ul>
    <ul class="list">
      <li class="item item-thumbnail-left">
        <img src="img/7.jpg" alt="">
        <h2>国务院成立江西电厂事故调查组 要求一查到底</h2>
        <p>被指与压缩工期等有关</p>
        <p>结构坍塌工人来不及跑</p>
        <p>13名相关人员被警方控制</p>
      </li>
    </ul>
    <ul class="list">
      <li class="item item-image ">
        <img src="img/1.jpg" alt="">
      </li>
    </ul>
    <ul class="list">
        <li class="item item-avatar-left item-icon-right" >
          <img src="img/1.jpg" alt="">
          <h2>hello word</h2>
          <i class="icon ion-leaf">7m</i>
        </li>
      <li class="item item-image">
        <img src="img/1.jpg" alt="">
      </li>
      <li class="item item-icon-right item-icon-left">
       <i class="icon ion-waterdrop"></i>
        <h2>滴水之恩</h2>
        <i class="icon ion-chevron-right"></i>
      </li>
      <li class="item item-icon-left item-icon-right">
        <i class="icon ion-ios-people-outline"></i>
        <h2>众人之众</h2>
        <i class="icon ion-chevron-right"></i>
      </li>
      <li class="item item-icon-right item-icon-left">
        <i class="icon ion-battery-empty"></i>
        <h2>弹尽粮绝</h2>
        <i class="icon ion-chevron-right"></i>
      </li>
      <li class="item item-icon-left item-icon-right">
        <i class="icon ion-battery-full"></i>
        <h2>精力十足</h2>
        <i class="icon ion-chevron-right"></i>
      </li>
      <li class="item item-thumbnail-left">
        <img src="img/7.jpg" alt="">
        <h2>国务院成立江西电厂事故调查组 要求一查到底</h2>
        <p>被指与压缩工期等有关</p>
        <p>结构坍塌工人来不及跑</p>
        <p>13名相关人员被警方控制</p>
      </li>
      <li class="item item-thumbnail-left">
        <img src="img/8.jpg" alt="">
        <h2>英雄</h2>
        <p>战长沙:杀!杀!杀!</p>
      </li>
      <li class="item item-thumbnail-left">
        <img src="img/3.jpg" alt="">
        <h2>美人</h2>
        <p>月静林下美人来</p>
      </li>
    </ul>
    <!--插入按钮-->
    <ul class="list">
      <li class="item item-button-right">
        <a href="#" class="button">点击我</a>
        <h2>我是谁</h2>
      </li>
      <li class="item item-button-right">
        <a href="#" class="button">点击我</a>
        <h2>我是谁</h2>
      </li>
    </ul>
    <!--徽章-->
    <ul class="list">
      <li class="item item-button-right">
        <h2>我是访问量</h2>
        <span class="badge badge-assertive">1</span>

      </li>
    </ul>
    <!--按钮-->
    <button class="button button-assertive">点我</button>
    <button class="button button-royal button-full">点我</button>
    <button class="button button-large">大一点的按钮</button>
    <button class="button button-small">小一点的按钮</button>
    <button class="button button-clear button-balanced ">没有边框</button>
    <button class="button button-outline button-dark">背景透明的按钮</button>
    <button class="button disabled">禁止的按钮</button>
    <!--添加图标-->
    <button class="button icon-left">
      <i class="icon ion-home">点我</i>
    <!--</button>-->
    <!--缩写-->
    <button class="button icon-left ion-home">点我</button>
      <button class="button icon ion-home">点我</button>
      <!--文本输入-->
      <form action="#">
        <ul class="list list-inset">
          <li class="item item-input assertive-bg">
            <label class="input-label royal-bg">用户名</label>
            <input type="text" placeholder="用户名" >
          </li>
          <li class="item item-input positive-bg">
            <label class="input-label balanced-bg">密码</label>
            <input type="text" placeholder="密码">
          </li>
          <li class="item item-input">
            <input type="submit" value="提交" class="button button-full button-balanced">
          </li>
        </ul>
      </form>
      <ul class="list">

      </ul>
      <!--文本输入的表单-->
      <div class="list">
        <label class="item item-input">
          <input  type="text" placeholder="用户名">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="密码">
        </label>
       <div class="padding">
           <button class="button button-full button-assertive">提交</button>
       </div>
        <!--带提示文字-->
         <div class="list">
           <label class="item item-input">
             <span class="input-label">用户名</span>
             <input type="text">
           </label>
           <label  class="item item-input">
             <span class="input-label">密码</span>
             <input type="text">
           </label>
           <div class="padding">
             <button class="button button-royal button-full" type="submit">提交</button>
           </div>
         </div>
      </div>
      <!--堆叠标签-->
      <div class="list">
        <label class="item item-input item-stacked-label">
          <span class="input-label">First Name</span>
          <input type="text" placeholder="John">
        </label>
        <label class="item item-input item-stacked-label">
          <span class="input-label">Last Name</span>
          <input type="text" placeholder="Suhr">
        </label>
        <label class="item item-input item-stacked-label">
          <span class="input-label">Email</span>
          <input type="text" placeholder="john@suhr.com">
        </label>
      </div>
      <!--浮动标签-->
      <div class="list">
        <label class="item item-input item-floating-label">
          <span class="input-label has-input">First Name</span>
          <input type="text" placeholder="First Name">
        </label>
        <label class="item item-input item-floating-label">
          <span class="input-label">Last Name</span>
          <input type="text" placeholder="Last Name">
        </label>
        <label class="item item-input item-floating-label">
          <span class="input-label">Email</span>
          <input type="text" placeholder="Email">
        </label>
      </div>
      <div class="padding">
        <button class="button button-block button-positive">Create Account</button>
      </div>
      <div class="list list-inset">
        <label class="item item-input">
          <i class="icon ion-search placeholder-icon"></i>
          <input type="text" placeholder="Search">
        </label>
      </div>
      <div class="bar bar-header item-input-inset">
        <label class="item-input-wrapper">
          <i class="icon ion-ios-search placeholder-icon"></i>
          <input type="search" placeholder="搜索">
        </label>
        <button class="button button-clear">
          取消
        </button>
      </div>
      <!--带图标的表单-->
      <div class="list">
        <label class="item item-input">
          <i class="icon ion-search placeholder-icon"></i>
          <input type="text" placeholder="Search">
        </label>
      </div>
      <!--手柄-->
      <label class="toggle toggle-assertive">
        <input type="checkbox">
        <div class="track">
           <div class="handle">

           </div>
        </div>
      </label>
      <!--复选框-->
       <ul class="list">
         <li class="item item-checkbox">
           <label class="checkbox">
             <input type="checkbox">

           </label>
           <h2>西瓜</h2>
           <p>西瓜好甜</p>
         </li>
         <li class="item item-checkbox">
           <label class="checkbox">
             <input type="checkbox">

           </label>
           <h2>西瓜</h2>
           <p>西瓜好甜</p>
         </li>
       </ul>
      <ul class="list">
         <li class="item royal">
        <input type="radio" name="group-name">
        <span class="item-content">css</span>

      </li>
        <li class="item balanced">
          <input type="radio" name="group-name" >
          <span class="item-content">html</span>

        </li>
        <li class="item positive">
          <input type="radio" name="group-name">
          <span class="item-content">java</span>

        </li>
        <li class="item dark">
          <input type="radio" name="group-name">
          <span class="item-content">bootstarp</span>

        </li>
      </ul>
      <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
  </div>
  <div class="bar bar-subfooter bar-assertive">
    <h1 class="title">我是底部的副导航</h1>
  </div>
  <div class="bar bar-footer bar-dark">
    <h1 class="title">我是底部</h1>
  </div>

  </body>
</html>
